<template>
  <div>
    <!-- 歌曲 -->
    <ul class="hotcont" @click="play_song">
      <li class="m_sglst">
        <div class="m_list">
          <div
            class="m_sg"
            :style="{
              color: song_data.song_index <= 3 && is_rank ? 'red' : '',
            }"
          >
            {{ song_data.song_index }}
          </div>

          <div class="m_sgch">
            <div class="ms">
              {{ song_data.song_name }}
            </div>
            <div class="mh">
              {{ song_data.song_ar | ars_filter }} -
              {{ song_data.song_people }}
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="m_sgfr">
          <!-- 需要第二个条件 当前送实例内的id与正在播放的音频一致 -->
          <van-icon
            v-if="play_state && song_info.id == song_data.id"
            name="pause-circle-o"
            @click.stop="pause_song"
          />
          <van-icon v-else name="play-circle-o" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { get_music } from "../api/common";

import { Toast } from "vant";

export default {
  props: {
    song_data: Object,
    // 用于接收当前歌曲的歌单 id 集合
    id_list: Array,
    // idx 接收一个下标，用于表示当前歌曲在歌单内的 位置
    ids: Number,
  },
  data() {
    return {
      is_rank: true,
    };
  },

  computed: {
    ...mapState(["play_state", "song_info"]),
  },

  methods: {
    async play_song() {
      let check_res = await get_music(this.song_data.id);

      if (check_res.data.success) {
        this.$audio.playSong(this.song_data.id);
        // 将当前 歌曲所在列表的 id 集合存至仓库内作为播放列表;
        this.$store.commit("set_play_list", this.id_list);

        // 改变 vuex 内歌曲的下标
        this.$store.commit("change_idx", this.ids);

        // this.$store.dispatch("get_song_detail", this.song_data.id);
        // this.$audio.playSong(this.song_data.id);
        // // 将当前 歌曲所在列表的 id 集合存至仓库内作为播放列表;
        // this.$store.commit("set_play_list", this.id_list);
      } else {
        Toast("暂无版权");
      }
    },
    pause_song() {
      this.$audio.pause();
    },
  },

  filters: {
    ars_filter(val) {
      let res = "";
      val.forEach((el) => {
        res += el.name + "/";
      });
      return res.slice(0, -1);
    },
  },

  watch: {
    $route: {
      handler(val) {
        if (val.name == "Rank") {
          this.is_rank = true;
        } else {
          this.is_rank = false;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.hotcont {
  .m_sglst {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    .m_list {
      display: flex;
      .m_sg {
        margin-left: 10px;
        font-size: 17px;
        margin-top: 15px;
      }
      .msg {
        color: red;
      }
      .m_sgch {
        text-align: left;
        margin-left: 15px;
        .ms {
          font-size: 17px;
          padding-top: 5px;
        }
        .mh {
          font-size: 12px;
          color: #888;
        }
      }
    }

    .m_sgfr {
      margin-top: 10px;
      margin-right: 15px;
      font-size: 22px;
      color: #888;
      i {
        font-size: 28px;
      }
    }
  }
}
</style>
